import React, { useState } from "react";
import "./index.css";

// 定义视频数据的接口
interface Video {
  id: number;
  title: string;
  src: string;
}

// 定义本地视频数据
const videos: Video[] = [
  { id: 1, title: '视频 1', src: '/videos/one.mp4' },
  { id: 2, title: '视频 2', src: '/videos/three.mp4' },
  { id: 3, title: '视频 3', src: '/videos/two.mp4' }
];


// 采用大驼峰命名法
const VideoPlayer: React.FC = () => {
   // 使用 useState 来管理当前播放的视频
  const [currentVideo, setCurrentVideo] = useState<Video>(videos[0]);

  // 处理视频切换的函数
  const handleVideoSwitch = (video: Video) => {
    setCurrentVideo(video);
  };

  return (
   <div className="app-container">
      {/* 左侧视频展示区域 */}
      <div className="video-container">
        <video width="640" height="360" controls>
          {/* 直接使用相对路径 */}
          <source src={currentVideo.src} type="video/mp4" />
          您的浏览器不支持视频播放。
        </video>
      </div>
      {/* 右侧按钮区域 */}
      <div className="button-container">
        {videos.map((video) => (
          <button
            key={video.id}
            onClick={() => handleVideoSwitch(video)}
            className="video-button"
          >
            {video.title}
          </button>
        ))}
      </div>
    </div>
  );
};

export default VideoPlayer;